@import (reference) '../../../assets/less/color.less';
.btn {
    display: inline-block;
    position: relative;
    overflow: hidden;
    button {
        padding: 10px 18px;
        border-radius: 2px;
        transition: background .3s, border .3s;
        border: 1px solid;
    }
    .btn-hover {
        display: block;
        position: absolute;
        border-radius: 100px;
        background: rgba(255, 255, 255, .2);
        transform-origin: 50% 50%;
        left: -40px;
        top: -50px;
        &.off {
            transform: scale(0, 0);
            opacity: 0;
        }
    }
}

.main-btn {
    button {
        color: @cFFFFFF;
        &.primary {
            background: @c009DFD;
            border-color: @c009DFD;
            &:hover {
                background: @c3887DF;
                border-color: @c3887DF;
            }
        }
        &.success {
            background: @c8CBE54;
            border-color: @c8CBE54;
            &:hover {
                background: @c7EAB4B;
                border-color: @c7EAB4B;
            }
        }
        &.warn {
            background: @cFBA829;
            border-color: @cFBA829;
            &:hover {
                background: @cE29724;
                border-color: @cE29724;
            }
        }
        &.danger {
            background: @cFF7272;
            border-color: @cFF7272;
            &:hover {
                background: @cE56666;
                border-color: @cE56666;
            }
        }
        &:hover {
            cursor: pointer;
        }
        &:disabled {
            background: @cE8E8E8;
            color: @cCCCCCC;
            &:hover {
                cursor: not-allowed;
            }
        }
    }
}

.normal-btn {
    button {
        &.primary {
            color: @c3F97F9;
            border-color: @c3F97F9;
            &:hover {
                background: @cD9EAFE;
            }
        }
        &.success {
            color: @c00B289;
            border-color: @c00B289;
            &:hover {
                background: @cCCF0E7;
            }
        }
        &.warn {
            color: @cFBA829;
            border-color: @cFBA829;
            &:hover {
                background: @cFEEED4;
            }
        }
        &.danger {
            color: @cFF7272;
            border-color: @cFF7272;
            &:hover {
                background: @cFFE3E3;
            }
        }
        &:hover {
            cursor: pointer;
        }
        &:disabled {
            border-color: @cE8E8E8;
            color: @cCCCCCC;
            &:hover {
                cursor: not-allowed;
            }
        }
    }
}
.link-btn {
    button {
        background: none;
        border-color: transparent;
        color: @c333333;
        &:hover {
            cursor: pointer;
            color: @c0D56A6
        }
        &:disabled {
            color: @cCCCCCC;
            &:hover {
                cursor: not-allowed;
            }
        }
    }
}